{% extends 'base.html' %}
{% block head_block %}
    <title>主页</title>
{% endblock head_block %}

{% block body_block %}

    <div class="root">
        <h1>Vue容器两大语法均可使用js语句，只不过一般仅使用简短的指令，如toUpper()</h1>
        <h1>插值语法：标签体内：双括号：welcome---{[ quest.name ]}</h1>
        <a :href="url">指令语法：解析标签-标签内（绑定标签属性）：v-bind, v-model等</a>
        <br>
        当Vue内容改变->input内容改变，表明Vue->input: <input type="text" placeholder="输入内容和Vue.data.content双向绑定" v-model="content">
        <p>{[ content ]}: 用于测试双向绑定的效果，当input内容改变，这里内容也改变，表明input->Vue</p>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '.root',
            data: {
                quest: {
                    name: 'Matthew',
                    age: 22
                },
                url: 'https://www.baidu.com', // 如果不加http，会以“这个文件“为根目录
                content: '',
            }
        })
    </script>
{% endblock body_block %}